<div id="bg-nav" style="padding: 10px;">
    <div class="full">
        <div style="height: 32px;margin-bottom: 10px;">
            <div style="float: left;padding:0 0 10px 10px;">
                <i-input v-model="sosoValue" icon="ios-close-circle-outline" @on-click="cleanValue"></i-input>
            </div>
            <div style="float: left;padding-left: 20px;">
                <i-button icon="ios-search-outline" @click="handleSearch">{{search}}</i-button>
            </div>
        </div>
        <div class="navigation-display-ui">
            <div v-for="gourp in bgNavList" class="navigation-display-li">
                <Card>
                    <p slot="title">
                        <Icon :type="gourp.icon"></Icon>
                        {{gourp.title}}
                    </p>
                    <template v-for="item in gourp.children">
                        <div class="navigation-display-li-btn-wrap">
                            <i-button :icon="item.icon" :type="selectedName==item.name?'primary':'default'" @click="selectdItem(item.name)">{{item.title}}</i-button>
                        </div>
                    </template>
                </Card>
            </div>
        </div>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#bg-nav",
            data: {
                search: isZh ? '搜索' : 'search',
                bgNavList: [],
                sosoValue: '',
                selectedName: '',
            },
            methods: {
                cleanValue: function() {
                    this.sosoValue = '';
                },
                handleSearch: function() {
                    for (var i = 0; i < this.bgNavList.length; i++) {
                        var children = this.bgNavList[i].children
                        for (var j = 0; j < children.length; j++) {
                            var title = children[j].title;
                            if (title.indexOf(this.sosoValue) > -1) {
                                this.selectedName = children[j].name;
                                return;
                            }
                        }
                    }
                    this.selectedName = "";
                },
                selectdItem: function(name) {
                    var vIns = vRoot.$children[3];
                    vIns.activeName = name;
                    vIns.openedNames = this.getOpenedNames(name);
                    vIns.selectditem(name);
                    vIns.$nextTick(function() {
                        vIns.$refs.bgNavMenu.updateOpened();
                    });
                },
                getOpenedNames: function(sName) {
                    var openedNames = [];
                    for (var i = 0; i < this.bgNavList.length; i++) {
                        var gName = this.bgNavList[i].name;
                        var children = this.bgNavList[i].children
                        for (var j = 0; j < children.length; j++) {
                            if (children[j].name == sName) {
                                openedNames.push(gName);
                                break;
                            }
                        }
                    }
                    return openedNames;
                }
            },
            mounted: function() {
                var navList = deepClone(vRoot.$children[3].navList);

                navList.shift();
                this.bgNavList = navList
            }
        })
    </script>
</div>